<template>
    <div id="box">
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="$router.back()" fixed/>
        <swiper>
            <swiper-slide v-for="data in imgsDatas" :key="data.src">
                <img :src="data.src">
            </swiper-slide>
        </swiper>
        <div class="content">
            <div>{{ goodsDatas.title }}</div>
            <div>{{ goodsDatas.sell_price }}</div>
            <div>{{ goodsDatas.market_price }}</div>
            <div>{{ goodsDatas.stock_quantity }}</div>
            <div>{{ goodsDatas.zhaiyao }}</div>
            <div>{{ dateFormat(goodsDatas.add_time, 'YYYY-MM-DD') }}</div>
            <div class="content-content" v-html="goodsDatas.content"></div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服"/>
            <van-action-bar-icon icon="cart-o" text="购物车"/>
            <van-action-bar-icon icon="shop-o" text="店铺"/>
            <van-action-bar-button type="danger" text="立即购买"/>
        </van-action-bar>
    </div>

</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getGoodsDatas, getImgsDatas } from '../api/detail'
import { dateFormat } from '../util/index'
const route = useRoute()
const goodsDatas = ref([])
const imgsDatas = ref({})
const id = route.query.id

// 挂载时发起请求获取图片网址的数据
onMounted(() => {
    _getGoodsDatas()
    _getImgsDatas()
})

// 构建发送axios请求获取商品数据的函数
const _getGoodsDatas = async () => {
    let  data  = await getGoodsDatas(id)
    goodsDatas.value = data.message
    console.log(goodsDatas.value);
    
}

// 构建发送axios请求获取商品图片的函数
const _getImgsDatas = async () => {
    let  data  = await getImgsDatas(id)
    imgsDatas.value = data.message
}
</script>

<style lang="scss" scoped>
#box {
    padding-top: 48px;
    padding-bottom: 50px;
    
    .swiper {
        .swiper-slide {
            height: 200px;
            img {
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .content {
        padding: 12px;
        background: #fff;
        
        > div {
            margin-bottom: 10px;
            
            &:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                color: #333;
                line-height: 1.4;
            }
            
            &:nth-child(2) {
                font-size: 22px;
                color: #f44336;
                font-weight: bold;
            }
            
            &:nth-child(3) {
                font-size: 14px;
                color: #999;
                text-decoration: line-through;
            }
            
            &:nth-child(4) {
                font-size: 14px;
                color: #666;
                padding: 5px 0;
                border-bottom: 1px solid #eee;
                
                &::before {
                    content: "库存: ";
                }
            }
            
            &:nth-child(5) {
                font-size: 15px;
                color: #666;
                line-height: 1.6;
                background: #f9f9f9;
                padding: 10px;
                border-radius: 4px;
            }
            
            &:nth-child(6) {
                font-size: 12px;
                color: #999;
                text-align: right;
                padding: 5px 0;
                border-bottom: 1px solid #eee;
            }
        }
        
        :deep(.content-content) {
            padding: 10px 0;
            line-height: 1.8;
            color: #666;
            font-size: 15px;
            
            img {
                width: 100%;
                height: auto;
                margin: 10px 0;
                border-radius: 4px;
            }
            
            p {
                margin: 10px 0;
            }
        }
    }
}
</style>